<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>火车票预订系统</title>
    <!-- 引入 Element UI 样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入 Vue 和 Element UI JS -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        body {
            font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f7fa;
        }
        .container {
            width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        .header {
            background-color: #409EFF;
            color: white;
            padding: 20px;
            text-align: center;
            margin-bottom: 20px;
            border-radius: 4px;
        }
        .search-form {
            background-color: white;
            padding: 20px;
            border-radius: 4px;
            margin-bottom: 20px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }
        .train-list {
            background-color: white;
            border-radius: 4px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }
        .train-item {
            padding: 15px;
            border-bottom: 1px solid #ebeef5;
        }
        .train-item:last-child {
            border-bottom: none;
        }
        .train-info {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
        }
        .seat-info {
            display: flex;
        }
        .seat-item {
            margin-right: 15px;
            text-align: center;
        }
        .price {
            color: #f56c6c;
            font-weight: bold;
        }
        .footer {
            text-align: center;
            margin-top: 20px;
            color: #909399;
            font-size: 12px;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="container">
        <!-- 头部 -->
        <div class="header">
            <h1>火车票预订系统</h1>
        </div>

        <!-- 搜索表单 -->
        <div class="search-form">
            <el-form :model="searchForm" label-width="80px">
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="出发城市">
                            <el-input v-model="searchForm.fromCity" placeholder="请输入出发城市"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="到达城市">
                            <el-input v-model="searchForm.toCity" placeholder="请输入到达城市"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="出发日期">
                            <el-date-picker
                                    v-model="searchForm.date"
                                    type="date"
                                    placeholder="选择日期"
                                    value-format="yyyy-MM-dd">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="车次类型">
                            <el-select v-model="searchForm.trainType" placeholder="请选择车次类型" style="width: 100%">
                                <el-option label="全部" value=""></el-option>
                                <el-option label="高铁" value="G"></el-option>
                                <el-option label="动车" value="D"></el-option>
                                <el-option label="直达" value="Z"></el-option>
                                <el-option label="特快" value="T"></el-option>
                                <el-option label="快速" value="K"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="座位类型">
                            <el-select v-model="searchForm.seatType" placeholder="请选择座位类型" style="width: 100%">
                                <el-option label="全部" value=""></el-option>
                                <el-option label="商务座" value="business"></el-option>
                                <el-option label="一等座" value="first"></el-option>
                                <el-option label="二等座" value="second"></el-option>
                                <el-option label="硬座" value="hard"></el-option>
                                <el-option label="软卧" value="softSleep"></el-option>
                                <el-option label="硬卧" value="hardSleep"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item>
                            <el-button type="primary" @click="searchTrains" style="width: 100%">查询车次</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>

        <!-- 车次列表 -->
        <div class="train-list" v-if="trains.length > 0">
            <div class="train-item" v-for="(train, index) in trains" :key="index">
                <div class="train-info">
                    <div>
                        <span style="font-size: 18px; font-weight: bold; color: #409EFF">{{ train.number }}</span>
                        <span style="margin: 0 10px">|</span>
                        <span>{{ train.startStation }} → {{ train.endStation }}</span>
                    </div>
                    <div>
                        <span>{{ train.departureTime }} 发车</span>
                        <span style="margin: 0 10px">-</span>
                        <span>{{ train.endTime }} 到达</span>
                        <span style="margin: 0 10px">|</span>
                        <span>{{ train.duration }}</span>
                    </div>
                </div>
                <div class="seat-info">
                    <div class="seat-item" v-for="(seat, seatIndex) in train.seats" :key="seatIndex">
                        <div>{{ seat.type }}</div>
                        <div class="price">¥{{ seat.price }}</div>
                        <div>余票: {{ seat.remain }}</div>
                        <el-button
                                type="primary"
                                size="mini"
                                @click="bookTicket(train, seat)"
                                :disabled="seat.remain <= 0">
                            {{ seat.remain > 0 ? '预订' : '无票' }}
                        </el-button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 无数据提示 -->
        <el-empty description="暂无车次数据" v-if="trains.length === 0 && searched"></el-empty>

        <!-- 底部 -->
        <div class="footer">
            <p>© 2023 火车票预订系统 | 仅供演示使用</p>
        </div>
    </div>

    <!-- 预订对话框 -->
    <el-dialog title="确认订单" :visible.sync="dialogVisible" width="30%">
        <el-form :model="orderForm" label-width="100px">
            <el-form-item label="车次">
                <span>{{ orderForm.trainNumber }}</span>
            </el-form-item>
            <el-form-item label="出发站/到达站">
                <span>{{ orderForm.startStation }} → {{ orderForm.endStation }}</span>
            </el-form-item>
            <el-form-item label="出发时间">
                <span>{{ orderForm.departureTime }}</span>
            </el-form-item>
            <el-form-item label="座位类型">
                <span>{{ orderForm.seatType }}</span>
            </el-form-item>
            <el-form-item label="价格">
                <span style="color: #f56c6c; font-weight: bold">¥{{ orderForm.price }}</span>
            </el-form-item>
            <el-form-item label="乘客姓名">
                <el-input v-model="orderForm.passengerName" placeholder="请输入乘客姓名"></el-input>
            </el-form-item>
            <el-form-item label="身份证号">
                <el-input v-model="orderForm.idCard" placeholder="请输入身份证号"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitOrder">确 定</el-button>
            </span>
    </el-dialog>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                searchForm: {
                    fromCity: '',
                    toCity: '',
                    date: '',
                    trainType: '',
                    seatType: ''
                },
                trains: [],
                searched: false,
                dialogVisible: false,
                orderForm: {
                    trainNumber: '',
                    startStation: '',
                    endStation: '',
                    departureTime: '',
                    seatType: '',
                    price: '',
                    passengerName: '',
                    idCard: ''
                }
            }
        },
        methods: {
            searchTrains() {
                // 模拟查询结果
                this.trains = [
                    {
                        number: 'G101',
                        startStation: '北京南',
                        endStation: '上海虹桥',
                        departureTime: '07:00',
                        endTime: '12:23',
                        duration: '5小时23分',
                        seats: [
                            { type: '商务座', price: 1748, remain: 5 },
                            { type: '一等座', price: 933, remain: 12 },
                            { type: '二等座', price: 553, remain: 20 }
                        ]
                    },
                    {
                        number: 'D321',
                        startStation: '北京',
                        endStation: '上海',
                        departureTime: '08:30',
                        endTime: '14:45',
                        duration: '6小时15分',
                        seats: [
                            { type: '一等座', price: 588, remain: 8 },
                            { type: '二等座', price: 368, remain: 15 },
                            { type: '软卧', price: 480, remain: 0 }
                        ]
                    },
                    {
                        number: 'Z281',
                        startStation: '北京',
                        endStation: '上海',
                        departureTime: '19:10',
                        endTime: '07:08',
                        duration: '11小时58分',
                        seats: [
                            { type: '软卧', price: 480, remain: 3 },
                            { type: '硬卧', price: 310, remain: 10 },
                            { type: '硬座', price: 156, remain: 25 }
                        ]
                    }
                ];
                this.searched = true;

                // 实际应用中这里应该是Ajax请求
                // axios.get('/api/trains', { params: this.searchForm })
                //     .then(response => {
                //         this.trains = response.data;
                //         this.searched = true;
                //     })
                //     .catch(error => {
                //         this.$message.error('查询失败: ' + error.message);
                //     });
            },
            bookTicket(train, seat) {
                this.orderForm = {
                    trainNumber: train.number,
                    startStation: train.startStation,
                    endStation: train.endStation,
                    departureTime: train.departureTime,
                    seatType: seat.type,
                    price: seat.price,
                    passengerName: '',
                    idCard: ''
                };
                this.dialogVisible = true;
            },
            submitOrder() {
                // 这里应该是提交订单的Ajax请求
                // axios.post('/api/orders', this.orderForm)
                //     .then(response => {
                //         this.$message.success('预订成功!');
                //         this.dialogVisible = false;
                //         // 刷新车次列表
                //         this.searchTrains();
                //     })
                //     .catch(error => {
                //         this.$message.error('预订失败: ' + error.message);
                //     });

                // 模拟成功
                this.$message.success('预订成功!');
                this.dialogVisible = false;
                // 减少余票数量
                this.trains.forEach(train => {
                    if (train.number === this.orderForm.trainNumber) {
                        train.seats.forEach(s => {
                            if (s.type === this.orderForm.seatType) {
                                s.remain--;
                            }
                        });
                    }
                });
            }
        }
    });
</script>
</body>
</html>